const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {

    // 生成 Source Map 文件
    devtool: 'eval-source-map',

    // 入口文件
    entry: './src/main.js',

    // 打包输出
    output: {
        // 注意需要使用 process.cwd() 获取到当前的工作目录
        path: path.join(process.cwd(), 'dist'),
        filename: 'app.[contenthash].js'
    },

    module: {
        rules: [
            // 处理纯 css 样式文件
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // 处理 sass|scss 样式文件
            {
                test: /\.(scss|sass)$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            // 处理图片和字体文件
            {
                test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
                type: "asset"
            },
            // 处理 ES6+ 语法
            {
                test: /\.m?js$/i,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                }
            },
            {
                test: /\.vue$/i,
                use: 'vue-loader'
            }
        ]
    },

    plugins: [
        // 生成 index.html
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),

        // 抽取样式
        new MiniCssExtractPlugin(),

        // 打包清理
        new CleanWebpackPlugin(),

        // 处理 Vue 组件
        new VueLoaderPlugin()
    ],

    resolve: {
        alias: {
            // 为 src 目录设置别名 @
            '@': path.resolve(process.cwd(), 'src')
        }
    }
}